<template>
	<view class="container">
		<view class="layout">
			<view class="block-item">
				<view class="label">
					<text>售后原因</text>
					<text class="suffix">*</text>
				</view>
				<view class="input-warp">
					<uni-data-select class="input" v-model="state.value" :localdata="state.range" placeholder="请选择售后原因"></uni-data-select>
				</view>
			</view>
			<view class="block-item">
				<view class="label">
					<text>补充描述或凭证</text>
					<text class="suffix">*</text>
				</view>
				<uni-easyinput v-model="state.text" type="textarea" style="margin-bottom: 40rpx"></uni-easyinput>
				<uni-file-picker v-model="state.imageList" @select="onFilesSelect" @delete="onDelete"></uni-file-picker>
			</view>
			<view class="block-item">
				<view class="label">售后须知</view>
				<view class="text">1. 七天无理由退货：在手机外观完好、包装无损且不影响二次销售的前提下，自收货之日起七日内，参与者有权申请退货退款。</view>
				<view class="text">2. 整机质保一年：平台为所提供的手机提供为期一年的免费质保服务。若手机故障系非人为因素所致，平台将负责免费维修，符合相应条件时可提供换新机服务。</view>
			</view>
			<view class="btn-group">
				<view class="btn-submit" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get, post, uploadFile } from '@/request/index.js';

const state = reactive({
	id: '',
	value: '',
	text: '',
	imageList: [],
	range: [
		{
			value: 1,
			text: '退货退款'
		},
		{
			value: 2,
			text: '换货'
		}
	],
	formList: []
});

onLoad((option) => {
	state.id = option.order_id;
	getListData();
});

// 获取售后原因
const getListData = async () => {
	const res = await post('mm/aftersaleReason');
	const { code, data } = res;
	if (code == 200) {
		state.range = data.map((item) => {
			return {
				id: item.id,
				text: item.aftersale_reason
			};
		});
	}
};

const submit = async () => {
	const { text, value, range, id, formList } = state;
	const reason = range.find((k) => k.value == value).text;

	if (!value.length) {
		return uni.showToast({
			title: '请选择手机售后原因'
		});
	}
	if (!text.length) {
		return uni.showToast({
			title: '请补充描述'
		});
	}
	if (!formList.length) {
		return uni.showToast({
			title: '请上传凭证'
		});
	}
	const params = {
		type: 2,
		order_id: id,
		reason_id: value,
		aftersale_desc: text,
		aftersale_images: formList.join(',')
	};
	const res = await post('agent/order/after_apply', params);
	const { code, message } = res;
	if (code == 200) {
		uni.showToast({
			title: message
		});
		setTimeout(() => {
			uni.navigateTo({
				url: `/pages/shouhoudetail/shouhoudetail`
			});
		}, 2000);
	}
};

//发票图片上传
const onFilesSelect = async (files) => {
	//uni-app, uni-file-picker组件上传有大坑，组件绑定的参数不会更新为接口返回的地址，所以要建两个参数，一个用于组件展示图片用，一个用于提交给后端接口用
	//组件展示图片的地址为临时地址，不是接口返回的服务器上的地址，即使将服务器返回的地址赋值给组件绑定的参数也不行，
	uni.showLoading({
		title: '上传中···'
	});
	const tempFilePaths = files.tempFilePaths;
	const imgUrl = tempFilePaths[0];
	const self = this;
	const res = await uploadFile('agent/Upload/image', imgUrl);
	const { code, data, message } = res;
	if (code == 200) {
		formData.fapiao.push(data.fall_url);
	}
	uni.hideLoading();
};
//删除图片，根据组件绑定的参数（state.imageList）中删除的图片下标，从formData.fapiao中删除对应下标的数据
const onDelete = (e) => {
	const num = e.index;
	formData.fapiao = formData.fapiao.filter((e, i) => i != num);
};
</script>

<style scoped>
.block-item {
	overflow: visible;
}
</style>
